<%@page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>*</title>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/examples/objects.js"></script>
</head>
<body>
	<div class="post">
		<div class="clearfix" style="margin-bottom: 20px;">
			<div class="info">
				<h2>
					<a
						href="http://www.quizzpot.com/2009/03/creacion-de-objetos-y-metodos-publicos/">Creación
						de objetos y métodos públicos</a>
				</h2>
				<span class="smalltext">Mar 11, 2009 | <a
					href="http://www.quizzpot.com/category/es/" title="Español">Español</a>
					| By <a href="http://www.quizzpot.com/author/admin/"
					title="Posts by Crysfel" rel="author">Crysfel</a> | <a
					href="http://www.quizzpot.com/2009/03/creacion-de-objetos-y-metodos-publicos/#comments"
					title="Comment on Creación de objetos y métodos públicos">4
						Comments</a> | <a
					href="http://www.quizzpot.com/2009/03/creating-objects-and-public-methods/">Read
						in English</a>
				</span>
				<p>En JavaScript todo es un objeto, las funciones, Strings,
					arreglos, etc. Sin embargo muchos desarrolladores programan en este
					lenguaje sin utilizar los conceptos de la programación orientada a
					objetos.</p>
			</div>
			<div class="tns">
				<div>
					<a
						href="http://www.quizzpot.com/2009/03/creacion-de-objetos-y-metodos-publicos/"><img
						src="http://www.quizzpot.com/wp-content/uploads/2009/03/bombilla.jpg"
						alt="Creación de objetos y métodos públicos"></a>
				</div>
			</div>
		</div>

		<div class="author clearfix">
			<img alt=""
				src="http://1.gravatar.com/avatar/7344c04fee0e5535e239b2a83623041a?s=80&amp;d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D80&amp;r=G"
				class="avatar avatar-80 photo" height="80" width="80"> <strong>Author:
				<a href="http://www.crysfel.com ">Crysfel</a>
			</strong>
			<p>
				I'm a software developer with 6+ years of experience, when I'm not
				developing software I may be writing a tutorial, you can follow me
				on <a href="http://twitter.com/crysfel">twitter</a>
			</p>
		</div>

		<div class="control-panel">
			<p class="clearfix">
				<a
					href="http://www.quizzpot.com/wp-content/uploads/2009/03/objects-src.zip"
					class="btn download"><span>Download</span></a>
			</p>
		</div>


		<p>En JavaScript existen dos maneras de crear objetos, una es
			mediante el objeto “Object” y la otra es utilizando las llaves “{ }”
			y escribiendo la propiedad y su valor correspondiente. Veamos un
			ejemplo de esto:</p>
		<div class="dp-highlighter">
			<div class="bar">
				<div class="tools">
					<a href="#"
						onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;">view
						plain</a><a href="#"
						onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;">copy
						to clipboard</a><a href="#"
						onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;">print</a><a
						href="#"
						onclick="dp.sh.Toolbar.Command('About',this);return false;">?</a>
				</div>
			</div>
			<ol start="1" class="dp-c">
				<li class="alt"><span><span class="comment">//Se&nbsp;crea&nbsp;un&nbsp;objeto</span><span>&nbsp;&nbsp;</span></span></li>
				<li class=""><span><span class="keyword">var</span><span>&nbsp;obj&nbsp;=&nbsp;</span><span
						class="keyword">new</span><span>&nbsp;Object();&nbsp;&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>&nbsp;&nbsp;</span></li>
				<li class=""><span><span class="comment">//se&nbsp;crea&nbsp;una</span><span>&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>obj.color&nbsp;=&nbsp;0xffffff;&nbsp;<span
						class="comment">//Número&nbsp;hexadecimal&nbsp;~&gt;16777215</span><span>&nbsp;&nbsp;</span></span></li>
				<li class=""><span>obj.click&nbsp;=&nbsp;<span
						class="keyword">function</span><span>(){&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span
						class="comment">//Podemos&nbsp;acceder&nbsp;a&nbsp;la&nbsp;propiedad&nbsp;color</span><span>&nbsp;&nbsp;</span></span></li>
				<li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;console.debug(<span
						class="keyword">this</span><span>.color);&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>}&nbsp;&nbsp;</span></li>
				<li class=""><span><span class="comment">//se&nbsp;llama&nbsp;al&nbsp;método&nbsp;click</span><span>&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>obj.click();&nbsp;&nbsp;</span></li>
				<li class=""><span>&nbsp;&nbsp;</span></li>
				<li class="alt"><span><span class="comment">//Se&nbsp;crea&nbsp;un&nbsp;objecto</span><span>&nbsp;&nbsp;</span></span></li>
				<li class=""><span><span class="keyword">var</span><span>&nbsp;obj&nbsp;=&nbsp;{&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span
						class="comment">//Se&nbsp;crea&nbsp;una&nbsp;propiedad&nbsp;color</span><span>&nbsp;&nbsp;</span></span></li>
				<li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;0xffffff,&nbsp;&nbsp;</span></li>
				<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span
						class="comment">//Este&nbsp;método&nbsp;pertenece&nbsp;al&nbsp;objeto&nbsp;obj</span><span>&nbsp;&nbsp;</span></span></li>
				<li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;click:&nbsp;<span
						class="keyword">function</span><span>(){&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
						class="comment">//Por&nbsp;lo&nbsp;tanto&nbsp;podemos&nbsp;acceder&nbsp;a&nbsp;la&nbsp;propiedad&nbsp;color</span><span>&nbsp;&nbsp;</span></span></li>
				<li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.debug(<span
						class="keyword">this</span><span>.color);&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;</span></li>
				<li class=""><span>}&nbsp;&nbsp;</span></li>
				<li class="alt"><span><span class="comment">//Ejecutamos&nbsp;el&nbsp;método&nbsp;click</span><span>&nbsp;&nbsp;</span></span></li>
				<li class=""><span>obj.click();&nbsp;&nbsp;</span></li>
			</ol>
		</div>
		<pre name="code" class="javascript" style="display: none;">//Se crea un objeto
var obj = new Object(); 

//se crea una
obj.color = 0xffffff; //Número hexadecimal ~&gt;16777215
obj.click = function(){
	//Podemos acceder a la propiedad color
	console.debug(this.color);
}
//se llama al método click
obj.click();

//Se crea un objecto
var obj = {
	//Se crea una propiedad color
	color: 0xffffff,
	//Este método pertenece al objeto obj
	click: function(){
		//Por lo tanto podemos acceder a la propiedad color
		console.debug(this.color);
	}
}
//Ejecutamos el método click
obj.click();
</pre>
		<p>
			En el ejemplo anterior se muestra como es posible crear objetos de
			dos maneras diferentes dándonos la libertad de elegir la que más nos
			convenga. Es importante mencionar que <strong>no podemos
				crear</strong> nuevos objetos a través de los objetos anteriores.
		</p>
		<h3>Creación de objetos</h3>
		<p>En JavaScript no existe el concepto de “clase” por lo tanto
			creamos y heredamos objetos de otros objetos, este concepto lleva por
			nombre “Herencia de prototipo”.</p>
		<p>En JavaScript podemos instanciar una función que es utilizada
			como el constructor del objeto, recordemos que las funciones son
			objetos también, veamos el siguiente ejemplo:</p>
		<div class="dp-highlighter">
			<div class="bar">
				<div class="tools">
					<a href="#"
						onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;">view
						plain</a><a href="#"
						onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;">copy
						to clipboard</a><a href="#"
						onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;">print</a><a
						href="#"
						onclick="dp.sh.Toolbar.Command('About',this);return false;">?</a>
				</div>
			</div>
			<ol start="1" class="dp-c">
				<li class="alt"><span><span class="comment">//Una&nbsp;función&nbsp;Person&nbsp;(Objeto)</span><span>&nbsp;&nbsp;</span></span></li>
				<li class=""><span><span class="keyword">function</span><span>&nbsp;Person(name,lastName){&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span
						class="comment">//Guarda&nbsp;el&nbsp;nombre&nbsp;y&nbsp;apellido&nbsp;en&nbsp;el&nbsp;contexto</span><span>&nbsp;&nbsp;</span></span></li>
				<li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span
						class="keyword">this</span><span>.name&nbsp;=&nbsp;name;&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span
						class="keyword">this</span><span>.lastName&nbsp;=&nbsp;lastName;&nbsp;&nbsp;</span></span></li>
				<li class=""><span>}&nbsp;&nbsp;</span></li>
				<li class="alt"><span>&nbsp;&nbsp;</span></li>
				<li class=""><span><span class="comment">//Se&nbsp;crea&nbsp;una&nbsp;instancia&nbsp;de&nbsp;la&nbsp;función&nbsp;(Objeto)&nbsp;Person</span><span>&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span><span class="keyword">var</span><span>&nbsp;john&nbsp;=&nbsp;</span><span
						class="keyword">new</span><span>&nbsp;Person(</span><span
						class="string">"John"</span><span>,</span><span class="string">"Doe"</span><span>);&nbsp;&nbsp;</span></span></li>
				<li class=""><span><span class="comment">//Se&nbsp;imprime&nbsp;el&nbsp;nombre&nbsp;y&nbsp;apellido</span><span>&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>console.debug(john.name+<span
						class="string">"&nbsp;"</span><span>+john.lastName);&nbsp;&nbsp;</span></span></li>
				<li class=""><span><span class="comment">//es&nbsp;una&nbsp;instancia&nbsp;del&nbsp;objeto&nbsp;Person</span><span>&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>console.debug(john.constructor&nbsp;==&nbsp;Person);&nbsp;&nbsp;</span></li>
			</ol>
		</div>
		<pre name="code" class="javascript" style="display: none;">//Una función Person (Objeto)
function Person(name,lastName){
	//Guarda el nombre y apellido en el contexto
	this.name = name;
	this.lastName = lastName;
}

//Se crea una instancia de la función (Objeto) Person
var john = new Person("John","Doe");
//Se imprime el nombre y apellido
console.debug(john.name+" "+john.lastName);
//es una instancia del objeto Person
console.debug(john.constructor == Person);
</pre>
		<p>En la última línea del ejemplo anterior se muestra la propiedad
			“constructor”, esta propiedad está presente en todos los objetos y
			siempre apunta a la función con la cual el objeto fue creado.</p>
		<h3>Métodos públicos</h3>
		<p>Los métodos públicos son completamente accesibles para las
			personas que utilizarán nuestro código y permite la comunicación del
			objeto con el exterior compartiendo o recibiendo información. Para
			realizar esto es necesario comprender la propiedad “prototype”, la
			cual es un objeto que actúa como referencia base para todas las
			copias que se realizarán de su padre, en otras palabras todas las
			propiedades y métodos que contenga la propiedad “prototype” estarán
			disponibles en cada instancia del objeto definido.</p>
		<p>La propiedad “prototype” es un objeto por lo tanto para
			agregarle propiedades lo hacemos de la misma forma que cualquier otro
			objeto, las propiedades agregadas serán totalmente públicas y
			accesibles para todos. Veamos el siguiente ejemplo:</p>
		<div class="dp-highlighter">
			<div class="bar">
				<div class="tools">
					<a href="#"
						onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;">view
						plain</a><a href="#"
						onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;">copy
						to clipboard</a><a href="#"
						onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;">print</a><a
						href="#"
						onclick="dp.sh.Toolbar.Command('About',this);return false;">?</a>
				</div>
			</div>
			<ol start="1" class="dp-c">
				<li class="alt"><span><span class="comment">//Objeto&nbsp;Animal</span><span>&nbsp;&nbsp;</span></span></li>
				<li class=""><span><span class="keyword">var</span><span>&nbsp;Animal&nbsp;=&nbsp;</span><span
						class="keyword">function</span><span>(name){&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span
						class="keyword">this</span><span>.name&nbsp;=&nbsp;name;&nbsp;&nbsp;</span></span></li>
				<li class=""><span>}&nbsp;&nbsp;</span></li>
				<li class="alt"><span><span class="comment">//Agregar&nbsp;un&nbsp;método&nbsp;público&nbsp;al&nbsp;objeto&nbsp;Animal</span><span>&nbsp;&nbsp;</span></span></li>
				<li class=""><span>Animal.prototype.getName&nbsp;=&nbsp;<span
						class="keyword">function</span><span>(){&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span
						class="comment">//El&nbsp;contexto&nbsp;es&nbsp;de&nbsp;la&nbsp;instancia&nbsp;creada</span><span>&nbsp;&nbsp;</span></span></li>
				<li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span
						class="keyword">return</span><span>&nbsp;</span><span
						class="keyword">this</span><span>.name;&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>}&nbsp;&nbsp;</span></li>
				<li class=""><span><span class="comment">//Método&nbsp;público</span><span>&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>Animal.prototype.setName&nbsp;=&nbsp;<span
						class="keyword">function</span><span>(name){&nbsp;&nbsp;</span></span></li>
				<li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span
						class="comment">//cambiar&nbsp;el&nbsp;valor&nbsp;de&nbsp;la&nbsp;propiedad&nbsp;name</span><span>&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span
						class="keyword">this</span><span>.name&nbsp;=&nbsp;name;&nbsp;&nbsp;</span></span></li>
				<li class=""><span>}&nbsp;&nbsp;</span></li>
				<li class="alt"><span>&nbsp;&nbsp;</span></li>
				<li class=""><span><span class="comment">//Creamos&nbsp;una&nbsp;instancia&nbsp;de&nbsp;perro&nbsp;y&nbsp;gato</span><span>&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span><span class="keyword">var</span><span>&nbsp;dog&nbsp;=&nbsp;</span><span
						class="keyword">new</span><span>&nbsp;Animal(</span><span
						class="string">"Lucky"</span><span>);&nbsp;&nbsp;</span></span></li>
				<li class=""><span><span class="keyword">var</span><span>&nbsp;cat&nbsp;=&nbsp;</span><span
						class="keyword">new</span><span>&nbsp;Animal(</span><span
						class="string">"Milo"</span><span>);&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>&nbsp;&nbsp;</span></li>
				<li class=""><span><span class="comment">//Llamamos&nbsp;al&nbsp;método&nbsp;getName</span><span>&nbsp;&nbsp;</span></span></li>
				<li class="alt"><span>console.debug(dog.getName());&nbsp;&nbsp;</span></li>
			</ol>
		</div>
		<pre name="code" class="javascript" style="display: none;">//Objeto Animal
var Animal = function(name){
	this.name = name;
}
//Agregar un método público al objeto Animal
Animal.prototype.getName = function(){
	//El contexto es de la instancia creada
	return this.name;
}
//Método público
Animal.prototype.setName = function(name){
	//cambiar el valor de la propiedad name
	this.name = name;
}

//Creamos una instancia de perro y gato
var dog = new Animal("Lucky");
var cat = new Animal("Milo");

//Llamamos al método getName
console.debug(dog.getName());
</pre>
		<h3>Conclusiones</h3>
		<p>Crear instancias, propiedades y métodos públicos es un tema
			conocido para muchos desarrolladores, quizás para otros no, en el
			siguiente tema veremos como ocultar propiedades y métodos haciéndolos
			privados.</p>
		<p>Si hay alguna duda, crítica o sugerencia pueden hacerla en los
			comentarios, nos gusta recibir sus opiniones.</p>
		<div class="wp_twitter_button"
			style="float: right; margin-left: 10px;">
			<iframe
				src="http://platform.twitter.com/widgets/tweet_button.html#_=1323060282047&amp;count=horizontal&amp;counturl=http%3A%2F%2Fwww.quizzpot.com%2F2009%2F03%2Fcreacion-de-objetos-y-metodos-publicos%2F&amp;id=twitter-widget-0&amp;lang=en&amp;original_referer=http%3A%2F%2Fwww.quizzpot.com%2F2009%2F03%2Fcreacion-de-objetos-y-metodos-publicos%2F&amp;text=Creaci%C3%B3n%20de%20objetos%20y%20m%C3%A9todos%20p%C3%BAblicos%20%C2%BB%20Quizzpot&amp;url=http%3A%2F%2Fwww.quizzpot.com%2F2009%2F03%2Fcreacion-de-objetos-y-metodos-publicos%2F&amp;via=quizzpot"
				allowtransparency="true" frameborder="0" scrolling="no"
				class="twitter-share-button twitter-count-horizontal"
				style="width: 110px; height: 20px;"
				title="Twitter For Websites: Tweet Button"></iframe>
		</div>
		<iframe
			src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.quizzpot.com%2F2009%2F03%2Fcreacion-de-objetos-y-metodos-publicos%2F&amp;layout=standard&amp;show_faces=true&amp;width=300&amp;height=25&amp;action=like&amp;font=trebuchet ms&amp;colorscheme=light"
			id="fbLikeIframe" name="fbLikeIframe" scrolling="no" frameborder="0"
			allowtransparency="true" class="fbLikeContainer"
			style="border: none; overflow: hidden; width: 300px; height: 25px; display: inline;"></iframe>
	</div>
</body>
</html>